import React,{useState} from 'react'
import { Modal, Button } from 'antd';

function TodeList() {
    const [data,setData] = useState([])
    const [count,setCount] = useState(0)
    const [value,setVaule] = useState("")
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [modalInput,setmodalInput] = useState("")
    //添加
    const add_data = () =>{
        let newData = [...data]
        newData.push(value)
        setData(newData)
        setVaule("")
      
    }
    //删除
    const del_data = (index) =>{
        console.log(index);
        let newData = [...data]
        newData.splice(index,1)
        setData(newData)
    }
    //点击编辑出来弹框 并且设置回显值
    const showModal = (item,index) => {
        setmodalInput(item)
        setCount(index)
        setIsModalVisible(true);
    };
    //点击确认按钮触发
    const handleOk = () => {
        let newData = [...data]
        newData[count] = modalInput
        setData(newData)
        setIsModalVisible(false);
    };
    //点击取消按钮触发
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    

    return (
        <div className="todo">
            <header> TodeList</header>
            <nav>
                <input type="text" value={value}  onChange={(e)=>setVaule(e.target.value)}/>
                <button onClick={add_data}>add</button>
            </nav>
            <main>
                {
                    data&&data.map((item,index)=>{
                        return <div className="item" key={index}>
                            <p>{item}</p>
                            <div>
                                <button onClick={()=>showModal(item,index)}>edit</button>
                                <button onClick={()=>del_data(index)}>del</button>
                            </div>
                        </div>
                    })
                }
            </main>
            <Modal title="todulist edit Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <input type="text" value={modalInput}  onChange={(e)=> setmodalInput(e.target.value)}/>
            </Modal>
        </div>
    )
}

export default TodeList
